<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bad-teach {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .bad-teach-item {
            position: relative;
            width: 40px;
            height: 32px;
            padding-left: 50px;
            padding-right: 20px;
            background: rgba(247, 181, 94, 1);
            border-radius: .4rem;
            margin: 10px 10px;
            overflow: hidden;
        }
        .bad-teach-item > .del {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background: rgba(70, 186, 125, 1);
            cursor: pointer;
            color: #fff;
        }
        .bad-teach-item > .name {
            display: block;
            background: rgba(247, 181, 94, 1);
            height: 32px;
            line-height: 32px;
            color: #fff;
        }
        .bad-teach_input {
            position: absolute;
            top: 34px;
            left: 0;
            width: 100%;
            max-height: 200px;
            overflow: auto;
            box-shadow: 0 1px 2px 0 #eee;
            z-index: 2;
            background: #fff;
            display: none;
        }
        .bad-teach_input-active {
            display: block;
        }
        .bad-teach_input:hover {
            display: block;
        }
        .bad-teach_input-wrap {
            position: relative;
            width: 150px;
            margin-right: 80px;
            border-radius: 4px;
        }
        .input-wrap {
            height: 30px;
            width: 100%;
        }
        .add-btn {
            position: absolute;
            top: 0;
            right: -70px;
            height: 30px;
            line-height: 30px;
            width: 60px;
            text-align: center;
            border: 1px solid rgba(22, 155, 213, 1);
            background: rgba(22, 155, 213, 1);
            color: #fff;
            box-sizing: border-box;
            border-radius: 4px;
        }
        .item-input {
            box-sizing: border-box;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border-radius: 4px;
            border: 1px solid #aaa;
            color: #333;
        }
        .input-item {
            padding: 6px 10px;
        }
        .input-item:hover {
            background: #eee;
        }
        .no-data {
            min-height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="badTeach">
        <div class="bad-teach">
                <div 
                    class="bad-teach-item" 
                    v-for="(item, index) in badTeachList"
                    :key="'teatch' + index">
                        <div class="del" @click="del(item)">图标</div>
                        <div class="name">{{item.name}}</div>
                </div>
        </div>
        {{text}}
        <div class="bad-teach_input-wrap">
            <div class="input-wrap">
                    <input 
                        type="text" 
                        class="item-input" 
                        placeholder="请输入老师的名字" 
                        maxlength="100"
                        v-model="text"
                        @input="input"
                        @blur="blur"
                        @focus="focus">
                    <div class="add-btn" @click="add">添加{{show}}</div>
            </div>
            <div  
                class="bad-teach_input"
                :class="{
                    'bad-teach_input-active': show || text
                }">
                <div v-if="inputList.length">
                    <div 
                        class="input-item" 
                        v-for="(item, index) in inputList"
                        :key="'name' + index"
                        @click="addItm(item)">
                        {{item.name}}
                    </div>
                </div>
                <div v-else class="no-data">
                    暂无数据
                </div>
            </div>
        </div>
        测试
    </div>
    <script type="text/javascript" src="../../static/js/vue.min.js" th:src="@{/static/js/vue.min.js}"></script>
    <script>
        var badTeach = new Vue({
            el: '#badTeach',
            data: {
                addItem: {},
                show: false, // 获取焦点
                text: '',
                badTeachList: [ // 黑名单老师
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Billy'
                    }
                ],
                inputList: [ // 模糊匹配
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Aize'
                    },
                    {
                        name: 'Carson'
                    },
                    {
                        name: 'Billy'
                    }
                ]
            },
            methods: {
                /**
                 * @description
                 * 点击每一项，删除一项
                 */
                del(item) {
                    alert(item.name)
                    console.log(item)
                },
                /**
                 * @description
                 * 点击每一项，添加新老师
                 */
                add() {
                    if (!badTeach.addItem.name) {
                        alert('请选择老师')
                    }
                    alert(badTeach.addItem.name)
                },
                /**
                 * @description
                 * 点击每一项，添加新老师到 addItem 变量
                 */
                addItm(item) {
                    badTeach.addItem = item // @todo 重要的数据点击之后获取的一项
                    badTeach.text = item.name
                    alert(badTeach.addItem.name)
                },
                /**
                 * @description
                 * input 输入的时候，获取通过ajax 获取数据，并改变 input 输入框
                 */
                input() {
                    console.log(this.text)
                    // ajax
                    // badTeach.inputList = [xxxx]
                },
                /**
                 * @description
                 * input 获取焦点
                 */
                focus() {
                    this.show = true
                },
                /**
                 * @description
                 * input 失去焦点
                 */
                blur() {
                    this.show = false
                }
            }
        })
    </script>
</body>
</html>